<template>
  <div class="about">
    <p>hello 字符串反转:{{ reverseStr }}</p>
    <p>getter 获取 todo done: {{ doneTodosCount }}</p>
    <p>传入 getters 做参数：{{ doneTodosCount }}</p>
    <p>直接访问：{{ doneTodos[0].text }}</p>

    <p>
      mutations 获取 increment: {{ mutationsCount }}
      <button @click="mIncrement">+</button>
    </p>
    <p>
      mutations 获取 decrement: {{ mutationsCount }}
      <button @click="mDecrement">-</button>
    </p>

    <div class="operation">
      clicked：{{ $store.state.counter.count }} times.
      <br />
      <el-button type="success" plain @click="increment">+</el-button>
      <el-button type="warning" plain @click="decrement">-</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      count: (state) => state.counter.count,
      mutationsCount: (state) => state.counter.mutationsCount,
      count: (state) => state.counter.count
    }),
    ...mapGetters("counter", {
      reverseStr: "reverseStr",
      doneTodosCount: "doneTodosCount",
      doneTodos: "doneTodos",
      getCount: "getCount",
    }),
  },
  methods: {
    mIncrement() {
      this.$store.commit("counter/mIncrement", 2);
    },
    mDecrement() {
      this.$store.commit("counter/mDecrement", {
        amount: 2,
      });
    },
    increment() {
      this.$store.dispatch("counter/increment");
    },
    decrement() {
      this.$store.dispatch("counter/decrement");
    }
  },
};
</script>
